<template>
  <div class="app-container">
    <avue-crud
      :option="option"
      ref="crud"
      :data="data"
      :table-loading="loading"
      :page.sync="page"
      @on-load="onLoad"
      @current-change="currentChange"
      @row-del="rowDel"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
      <template
        slot="icon"
        slot-scope="scope"
      >
        <div v-if="scope.row.icon">
          <svg-icon :icon-class="scope.row.icon"></svg-icon>
        </div>
      </template>
      <template
        slot="fpzt"
        slot-scope="scope"
      >
        <div>
          <span v-if="scope.row.eid">已分配</span>
          <span v-else>未分配</span>
        </div>
      </template>
      <template
        slot="menuLeft"
        slot-scope="{}"
      >
        <el-button
          type="primary"
          icon="iconfont icon-operation"
          @click="handleGrant('add')"
          v-has="'allotManager '"
        > 分配客户经理
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="handleGrant('up')"
          v-has="'changeManager '"
        > 更改客户经理
        </el-button>
      </template>
      <template
        slot-scope="{type,size,row}"
        slot="menu"
      >
        <el-button
          size="small"
          type="text"
          @click="checkOpen(row)"
          icon="el-icon-view"
        >查看</el-button>
        <el-button
          v-if="row.eid"
          icon="el-icon-document-delete"
          :size="size"
          :type="type"
          @click="celCustomer(row)"
          v-has="'retrieveClient'"
        >收回客户</el-button>
      </template>
    </avue-crud>
    <el-dialog
      title="选择客户经理"
      class="avue-dialog"
      :visible.sync="box"
      width="55%"
    >
      <avue-crud
        :option="customerOption"
        :table-loading="customerLoading"
        :data="customerData"
        ref="customer_crud"
        v-model="customerForm"
        @selection-change="customerSelectionChange"
        @row-click="customerRowClick"
        :page.sync="customerPage"
        @current-change="customerChange"
        @on-load="onCustomerLoad"
      >
      </avue-crud>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          v-if="handleType=='add'"
          @click="submit(handleType)"
        >确 定</el-button>
        <el-button
          type="primary"
          v-if="handleType=='up'"
          @click="submit(handleType)"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog
      title="查看"
      :visible.sync="checkDialog"
      width="60%"
      center
    >
      <el-form
        ref="form"
        :model="dataList"
        label-width="100px"
      >
        <div class="message">
          <div class="module">
            <el-tabs v-model="active">
              <el-tab-pane
                label="企业信息"
                name="first"
              >
                <table class="detailtable">
                  <tr>
                    <td width="15%">企业名称</td>
                    <td width="35%">{{dataList.qymc}}</td>
                    <td width="15%">统一社会信用代码</td>
                    <td width="35%">{{dataList.shtyxydm}}</td>
                  </tr>
                  <tr>
                    <td width="15%">法人姓名</td>
                    <td width="35%">{{dataList.fddbr}}</td>
                    <td width="15%">联系方式</td>
                    <td width="35%">{{dataList.dh}}</td>
                  </tr>
                  <tr>
                    <td width="15%">注册时间</td>
                    <td width="35%">{{dataList.clrq}}</td>
                    <td width="15%">注册资金</td>
                    <td width="35%">{{dataList.zczb}}万元</td>
                  </tr>
                  <tr>
                    <td width="15%">所属行业</td>
                    <td width="35%">{{dataList.sshy}}</td>
                    <td width="15%">所属区域</td>
                    <td width="35%">{{dataList.ssqu}}</td>
                  </tr>
                  <tr>
                    <td width="15%">企业类型</td>
                    <td colspan="3">{{dataList.qylx | filterQylx(qylxList)}}</td>
                  </tr>
                  <tr>
                    <td width="15%">注册地址</td>
                    <td colspan="3">{{dataList.zs}}</td>
                  </tr>
                </table>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--                    <div class="module">-->
          <!--                        <el-tabs v-model="active">-->
          <!--                            <el-tab-pane label="法人信息" name="first">-->
          <!--                                <table class="detailtable">-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">姓名</td>-->
          <!--                                        <td>{{dataList.fddbr}}</td>-->
          <!--                                        <td width="15%">性别</td>-->
          <!--                                        <td>{{dataList.xb}}</td>-->
          <!--                                        <td width="15%">出生日期</td>-->
          <!--                                        <td>{{dataList.csrq}}</td>-->
          <!--                                    </tr>-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">籍贯</td>-->
          <!--                                        <td>{{dataList.jg}}</td>-->
          <!--                                        <td width="15%">婚姻状况</td>-->
          <!--                                        <td>{{dataList.hyzk}}</td>-->
          <!--                                        <td width="15%">学历</td>-->
          <!--                                        <td>{{dataList.xl}}</td>-->
          <!--                                    </tr>-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">身份证号</td>-->
          <!--                                        <td>{{dataList.sfzjhm}}</td>-->
          <!--                                        <td width="15%">联系方式</td>-->
          <!--                                        <td>{{dataList.lxdh}}</td>-->
          <!--                                        <td width="15%">邮箱</td>-->
          <!--                                        <td>{{dataList.yx}}</td>-->
          <!--                                    </tr>-->
          <!--                                    <tr>-->
          <!--                                        <td width="15%">联系地址</td>-->
          <!--                                        <td colspan="5">{{dataList.zs}}</td>-->
          <!--                                    </tr>-->
          <!--                                </table>-->
          <!--                            </el-tab-pane>-->
          <!--                        </el-tabs>-->
          <!--                    </div>-->
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getK, assignC, upAssign, celC, getCUser } from '@/api/manager.js'
export default {
  data() {
    return {
      loading: false,
      form: {},
      /* 分页 */
      page: {
        pageSize: 10,

        pageSizes: [10, 20, 30, 40, 50, 100],
        pagerCount: 5,
        layout: 'total, sizes, prev, pager, next, jumper',

        currentPage: 1,
        total: 0,
        background: false,
      },
      searchList: {},
      qylxList: [],
      checkDialog: false,
      dataList: {},
      active: 'first',

      data: [],
      selectionList: [],
      option: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        // index: true,
        // indexLabel: '序号',
        indexWidth: 100,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        labelWidth: 135,
        viewBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,

        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        // searchBtn: true,
        // searchSpan: 9,
        searchShowBtn: false,

        selection: true,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        column: [
          {
            label: '企业名称',
            prop: 'qymc',
            display: false,
            search: true,
          },
          {
            label: '社会统一信用代码',
            prop: 'shtyxydm',
            display: false,
            search: true,
          },
          {
            label: '企业类型',
            prop: 'qylx',
            display: false,
            search: true,
            type: 'select',
            dicData: [
              {
                label: '小微企业',
                value: '1',
              },
              {
                label: '中型企业',
                value: '2',
              },
              {
                label: '大型企业',
                value: '3',
              },
              {
                label: '超大型企业',
                value: '4',
              },
              {
                label: '个体工商户',
                value: '5',
              },
            ],
          },
          {
            label: '法人姓名',
            prop: 'fddbr',
            display: false,
            search: true,
          },
          // {
          //     label: '企业综合评分',
          //     prop: 'score',
          //     display: false
          // },
          {
            label: '分配状态',
            slot: true,
            prop: 'fpzt',
            display: false,
          },
          {
            label: '客户经理',
            slot: true,
            prop: 'ename',
            display: false,
          },
          {
            label: '联系方式',
            prop: 'lxdh',
            display: false,
          },
          {
            label: '创建时间',
            prop: 'createTime',
            display: false,
          },
        ],
        group: [
          {
            icon: 'el-icon-info',
            label: '企业信息',
            collapse: true,
            column: [
              {
                label: '企业名称',
                prop: 'qymc',
              },
              {
                label: '社会统一信用代码',
                prop: 'shtyxydm',
              },
              {
                label: '注册时间',
                prop: 'clrq',
              },
              {
                label: '注册资金',
                prop: 'zczb',
              },
              {
                label: '企业类型',
                prop: 'qylx',
                type: 'select',
                dicData: [
                  {
                    label: '小微企业',
                    value: '1',
                  },
                  {
                    label: '中型企业',
                    value: '2',
                  },
                  {
                    label: '大型企业',
                    value: '3',
                  },
                  {
                    label: '超大型企业',
                    value: '4',
                  },
                  {
                    label: '个体工商户',
                    value: '5',
                  },
                ],
              },
              {
                label: '所属行业',
                prop: 'sshy',
                type: 'select',
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '农林牧渔业',
                    value: '0',
                  },
                  {
                    label: '教育',
                    value: '1',
                  },
                  {
                    label: '采矿业',
                    value: '2',
                  },
                ],
              },
              {
                label: '注册地址',
                prop: 'zs',
                // }, {
                //     label: '企业性质',
                //     prop: 'qyxz',
              },
              {
                label: '企业联系方式',
                prop: 'dh',
              },
              {
                label: '企业综合评分',
                prop: 'score',
              },
            ],
          },
          {
            icon: 'el-icon-info',
            label: '法人信息',
            collapse: true,
            column: [
              {
                label: '法人姓名',
                prop: 'fddbr',
              },
              {
                label: '性别',
                prop: 'xb',
                type: 'select',
                dicData: [
                  {
                    label: '男',
                    value: '1',
                  },
                  {
                    label: '女',
                    value: '0',
                  },
                ],
              },
              {
                label: '出生日期',
                // type: 'csrq',
                prop: 'csrq',
              },
              {
                label: '籍贯',
                prop: 'jg',
              },
              {
                label: '婚姻状况',
                prop: 'hyzk',
                type: 'select',
                dicData: [
                  {
                    label: '已婚',
                    value: '1',
                  },
                  {
                    label: '未婚',
                    value: '0',
                  },
                ],
              },
              {
                label: '学历',
                prop: 'xl',
                type: 'select',
                dicData: [
                  {
                    label: '请选择',
                    value: '',
                  },
                  {
                    label: '专科',
                    value: '0',
                  },
                  {
                    label: '本科',
                    value: '1',
                  },
                  {
                    label: '其他',
                    value: '2',
                  },
                ],
              },

              {
                label: '身份证',
                prop: 'sfzjhm',
              },
              {
                label: '手机号',
                prop: 'lxdh',
              },
              {
                label: '邮箱',
                prop: 'yx',
              },
              {
                label: '联系地址',
                prop: 'dz',
              },
            ],
          },
        ],
      },

      /* 配置弹窗 */
      box: false,
      customerLoading: false,
      handleType: 'add',
      customerForm: {},
      customerPage: {
        page: 1,
        size: 5,
        total: 0,
      },
      /* 已选中 客户经理 */
      customerSelectionList: [],
      customerData: [],
      customerOption: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        // index: true,
        // indexLabel: '序号',
        indexWidth: 100,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        selection: true,
        reserveSelection: true,

        columnBtn: false,
        refreshBtn: false,
        selectClearBtn: false,
        // searchBtn: true,
        // searchSpan: 9,
        searchShowBtn: false,

        column: [
          {
            label: '工号',
            prop: 'eid',
          },
          {
            label: '姓名',
            prop: 'userName',
          },
          {
            label: '性别',
            prop: 'userGender',
            type: 'select',
            dicData: [
              {
                label: '男',
                value: false,
              },
              {
                label: '女',
                value: true,
              },
            ],
          },
          {
            label: '联系方式',
            prop: 'userPhone',
          },
          // {
          //     label: '所属机构',
          //     prop: 'deptCode'
          // },
          {
            label: '所属部门',
            prop: 'province',
          },
        ],
      },
    }
  },
  created() {
    let params = {
      page: 1,
      size: 100,
      code: 'QYLX',
    }
    getField(params).then((res) => {
      if (res.status) {
        this.qylxList = res.data.records
      }
    })
  },
  filters: {
    filterQylx(val, qylxList) {
      var isnum = /^\d+$/.test(val)
      if (isnum) {
        return qylxList.filter((item) => item.fieldCode == val)[0].fieldName
      } else {
        return val
      }
    },
  },
  methods: {
    onLoad(page, params = {}) {
      // if (page.layout) {
      //     Object.assign(params, {
      //         page: 1,
      //         size: 10,
      //     });
      // } else {
      //     Object.assign(params, page);
      // }
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      /* Object.assign(params, {
                    pageNum: this.page.currentPage,
                    pageSize: this.page.pageSize
                })

                if (page.layout) {
                    Object.assign(params, {
                        page: 1,
                        size: 10,
                    });
                } else {
                    Object.assign(params, page);
                } */

      this.loading = true

      getK(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        }
      })
    },
    /* 查看 */
    checkOpen(row) {
      this.checkDialog = true
      this.dataList = { ...row }
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {
        ...params,
      }
      this.onLoad()
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    customerChange(i) {
      this.customerPage.currentPage = i
    },
    /* 选中客户回调 */
    selectionChange(list) {
      this.selectionList = list
    },
    /* 角色配置 */
    handleGrant(e) {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至多一条数据')
        return
      } else if (this.selectionList.length > 1) {
        this.$message.warning('请选择至多一条数据')
        return
      } else {
        this.handleType = e
        this.box = true
      }
    },
    /* 用户 && 角色列表行点击row选中 */
    rowClick(row) {
      this.data.map((item) => {
        if (item.shtyxydm == row.shtyxydm) {
          this.$refs.crud.toggleSelection()
          this.$refs.crud.toggleSelection([item])
        }
      })
    },
    /* 删除 */
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delOrg({
          id: row.id,
        }).then(() => {
          this.onLoad(this.page)
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },

    /* 选中客户经理回调 */
    customerSelectionChange(list) {
      if (list.length <= 1) {
        this.customerSelectionList = list
      } else {
        this.$refs.cutomer_crud.toggleSelection()
        this.$message.error('请选择单个角色分配!')
      }
    },
    customerRowClick(row) {
      this.customerData.map((item) => {
        if (item.id == row.id) {
          this.$refs.customer_crud.toggleSelection()
          this.$refs.customer_crud.toggleSelection([item])
        }
      })
    },
    /* 获取客户经理列表 */
    onCustomerLoad(page, params = {}) {
      if (page.layout) {
        Object.assign(params, {
          page: 1,
          size: 10,
        })
      } else {
        Object.assign(params, page)
      }
      this.customerLoading = true
      getCUser(params).then((data) => {
        if (data.status) {
          this.customerLoading = false
          this.customerData = data.data.records
          this.customerPage.total = data.data.total
        }
      })
    },

    /* 取消 */
    cancel() {
      this.box = false
      this.$refs.crud.toggleSelection()
      this.$refs.customer_crud.toggleSelection()
    },
    /* 收回客户 */
    celCustomer(row) {
      this.$confirm('确定将收回客户?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        celC({
          shtyxydm: row.shtyxydm,
        }).then((data) => {
          if (data.status) {
            this.onLoad(this.page)
            this.$message({
              type: 'success',
              message: '操作成功!',
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    submit(e) {
      let form = []
      if (this.customerSelectionList.length === 0) {
        this.$message.warning('请选择至多一条数据')
        return
      } else if (this.customerSelectionList.length > 1) {
        this.$message.warning('请选择至多一条数据')
        return
      } else {
        // form = this.customerSelectionList;
        // let form = new Map();
        // form.set("eid",this.customerSelectionList[0].eid)
        var shtyxydms = []
        shtyxydms.push(this.selectionList[0].shtyxydm)
        // form.set("shtyxydms",shtyxydms)

        // form.eid = this.customerSelectionList[0].eid;

        if (e == 'up') {
          upAssign(
            this.selectionList[0].shtyxydm,
            this.customerSelectionList[0].eid
          ).then((data) => {
            if (data.status) {
              this.box = false
              this.$message.success(data.msg)
              this.customerSelectionList = []
              this.selectionList = []
              this.$refs.crud.toggleSelection()
              this.$refs.customer_crud.toggleSelection()
              this.onLoad(this.page)
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          assignC({
            shtyxydms: shtyxydms,
            eid: this.customerSelectionList[0].eid,
          }).then((data) => {
            if (data.status) {
              this.box = false
              this.$message.success(data.msg)
              this.customerSelectionList = []
              this.selectionList = []
              this.$refs.crud.toggleSelection()
              this.$refs.customer_crud.toggleSelection()
              this.onLoad(this.page)
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      }
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.detailtable {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: #e5e5e5 solid 1px;
}
.detailtable tr {
  width: 100%;
}
.detailtable td {
  padding: 8px 10px;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  color: #434343;
  border: #e5e5e5 solid 1px;
}
.detailtable td {
  font-weight: normal;
  background-color: #fff;
}
.detailtable td {
  word-break: break-all;
}
</style>
